/**
 * @author wangyl
 * copyright 2016 HT for Web All Rights Reserved.
 */
var Grid = function() {
    this._name = 'grid-' + Date.now();

    this.label = '';
    this.labelColor = '#000000';

    this.value = '';

    this.image = '';

    this.background = '#FFFFFF';

    this.borderWidth = 1;
    this.borderColor = '#CCCCCC';

    this.width = 100;
    this.height = 80;

    this._comp = null;
};

Grid.prototype = {};
Grid.prototype.constructor = Grid;

Object.defineProperties(Grid.prototype, {
    'name' : {
        get : function() { return this._name; },
        set : function(v) {
            if (this._name === v) return;
            this.unBuild();

            this._name = v;

            var comp = this.getComp();
            comp.name = v;
        }
    }
});

Grid.prototype.unBuild = function() {
    ht.Default.setImage(this.name, null);
};

Grid.prototype.build = function() {
    var comps = [];
    if (this.background) {
        comps.push({
            type : 'rect',
            rect : [0, 0, this.width, this.height],
            background : this.background,
            borderWidth : this.borderWidth,
            borderColor : this.borderColor
        });
    }

    if (this.label) {
        comps.push({
            type : 'text',
            text : this.label,
            rect : [0, 8, this.width, 20],
            color : this.labelColor,
            font : '14px Arial',
            align : 'center'
        });
    }

    if (this.value != null) {
        comps.push({
            type : 'text',
            text : this.value,
            rect : [0, 30, this.width, 44],
            color : '#34495E',
            font : 'bold 34px Arial',
            align : 'center'
        });
    }

    if (this.image) {
        var imgKey = this.name + '_image';
        ht.Default.setImage(imgKey, this.image);
        comps.push({
            type : 'image',
            name : imgKey,
            stretch : 'centerUniform',
            rect : [0, 0, this.width, this.height]
        });
    }
    ht.Default.setImage(this.name, {
        width: this.width,
        height: this.height,
        comps: comps
    });
};

Grid.prototype.getComp = function() {
    this.build();
    if (this._comp) return this._comp;

    return this._comp = {
        type : 'image',
        name : this.name,
        rect : [0, 0, this.width, this.height]
    };
};